<template>
  <el-card class="editor-right" shadow="never">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="属性配置" name="props"></el-tab-pane>
      <el-tab-pane label="图层配置" name="coverage"></el-tab-pane>
      <el-tab-pane label="页面配置" name="page"></el-tab-pane>
    </el-tabs>
    <div class="editor-list-wrapper">
      <template v-if="activeName === 'props'">
        <div v-if="!currentComponent" class="flex flex-column align-center">
          <icon-svg :iconName="'empty-status'" :w="100" :h="100"></icon-svg>
          <p>在画布中选择元素并开始编辑</p>
        </div>
        <div v-else-if="currentComponent.isLocked" class="flex flex-column align-center">
          <icon-svg :iconName="'empty-status'" :w="100" :h="100"></icon-svg>
          <p>该元素被锁定，无法编辑</p>
        </div>
        <template v-else>
          <edit-group :props="currentComponent.props" @changeProps="changeProps" />
        </template>
      </template>
      <template v-else-if="activeName === 'coverage'">
        <Coverage :list="components" />
      </template>
      <template v-else-if="activeName === 'page'">
        <props-table :propsData="pageData.props" @change="changePageProps" />
      </template>
    </div>
  </el-card>
</template>

<script lang="ts">
import { defineComponent, computed, ref, watch } from "vue";
import { useStore } from "vuex";
import { IGlobalDataProps } from "@/store/index.ts";
import { IComponentData } from "@/store/modules/editor.ts";
import {
  GET_CURRENT_COMPONENT,
  UPDATE_COMPONENT_PROPS,
  UPDATE_CURRENT_ID,
  UPDATE_PAGE_PROPS,
} from "@/utils/Const";
import Uploade from "@/components/Uploade/index.vue";
import Coverage from "@/components/Coverage/index.vue";
import PropsTable from "@/components/PropsTable/index.vue";
import EditGroup from "@/components/EditGroup/index.vue";
export default defineComponent({
  name: "EditorRight",
  components: {
    PropsTable,
    Uploade,
    Coverage,
    EditGroup,
  },
  setup() {
    const store = useStore<IGlobalDataProps>();
    // 选中的组件ID
    let currentId = computed(() => store.state.editor.currentId);
    // 选中的组件
    let currentComponent = computed<IComponentData | null>(
      () => store.getters[`editor/${GET_CURRENT_COMPONENT}`]
    );
    // page
    let pageData = computed(() => store.state.editor.page);
    // 组件列表
    let components = computed(() => store.state.editor.components);
    // tab
    let activeName = ref("props");
    // 更新属性
    const changeProps = (v: any) => {
      store.commit(`editor/${UPDATE_COMPONENT_PROPS}`, v);
    };
    // 更新page属性
    const changePageProps = (v: any) => {
      store.commit(`editor/${UPDATE_PAGE_PROPS}`, v);
    };

    // tab切换联动
    watch(activeName, (newVal: string) => {
      if (newVal === "page") {
        // 联动选中主页面
        store.commit(`editor/${UPDATE_CURRENT_ID}`, newVal);
      } else if (currentId.value === "page") {
        // 取消选中界面
        store.commit(`editor/${UPDATE_CURRENT_ID}`, "");
      }
    });

    // 联动tab
    watch(currentId, (newVal: string) => {
      if (newVal === "page") {
        activeName.value = "page";
      }
    });

    return {
      activeName,
      currentComponent,
      components,
      changeProps,
      changePageProps,
      pageData,
    };
  },
});
</script>
<style lang="scss" scoped>
.editor-list-wrapper {
  height: calc(100vh - 150px);
  overflow-y: scroll;
}
</style>
